<template>
  <div>
    <div class="control">
      <!-- 车牌号 -->
      <div class="inputItem">
        <div class="title">车牌号</div>
        <div class="inputBox">
          <el-input v-model="carNumber" @keyup.enter.native="searchList">
          </el-input>
        </div>
      </div>
      <!-- 车型 -->
      <div class="inputItem">
        <div class="title">车型</div>
        <div class="inputBox">
          <el-select class="select" v-model="TypeSelected" placeholder="请选择" @change="changeVehicleType($event)">
            <el-option v-for="item in vehicleTypeData" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictLabel">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">加入时间</div>
        <el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>

      <!-- 查询 -->
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchList">查询</el-button>
      <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table1">
          <el-table-column align="center" width="60px" prop="SerialNumber" label="序号">
          </el-table-column>
          <el-table-column prop="carFortyFive" align="center" label="车辆照片">
            <template slot-scope="scope">
              <el-image style="width: 65px; height: 48px;" :src="scope.row.carFortyFive"
                :preview-src-list="[scope.row.carFortyFive]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="numberplate" label="车牌号">
          </el-table-column>
          <el-table-column align="center" prop="vehicleType" label="车辆类型">
          </el-table-column>
          <el-table-column align="center" prop="brandModel" label="品牌型号">
          </el-table-column>
          <el-table-column align="center" prop="specification" label="规格">

          </el-table-column>
          <el-table-column align="center" prop="carriageLength" label="厢长">
            <template slot-scope="scope">
              <div>{{ scope.row.carriageLength == null ? '--' : scope.row.carriageLength + '米' }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="loadSide" label="载方">
            <template slot-scope="scope">
              <div>{{ scope.row.loadSide == null ? '--' : scope.row.loadSide + '方' }}</div>
            </template>

          </el-table-column>
          <el-table-column align="center" prop="loadCapacity" label="载重">
            <template slot-scope="scope">
              <div>{{ scope.row.loadCapacity == null ? '--' : scope.row.loadCapacity + '吨' }}</div>
            </template>

          </el-table-column>
          <el-table-column align="center" prop="vehicleHeight" label="车高">
            <template slot-scope="scope">
              <div>{{ scope.row.vehicleHeight == null ? '--' : scope.row.vehicleHeight + '米' }}</div>
            </template>

          </el-table-column>
          <el-table-column align="center" prop="certStatus" label="认证状态">
            <template slot-scope="scope">
              <div class="stateBtns">
                <el-button :class="scope.row.certStatus == 2 ? 'Pass' : 'noPass'" size="small">
                  <i class="iconfont icon-dian"></i>
                  {{ scope.row.certStatus == 2 ? "认证通过" : "不通过" }}
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="加入时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="permissions.getDetails.perms != null"
                  @click="showDetailBox(scope.row.vehicleId)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div>
      <el-dialog custom-class="zdy_dialog" width="30%" :visible.sync="VisibleDetail">
        <div class="dialog_header" slot="title">
          <i class="iconfontcolor icon-dairenzhengcheliang"></i>
          <div class="infoBox">
            <div class="info">
              <span class="carNumber">{{ DetailsData.numberplate }}</span>
              <div class="tag">已认证</div>
            </div>
            <div class="text">车辆编号：{{ DetailsData.vehicleId }}</div>
          </div>
        </div>

        <div class="dialog_body">
          <!-- 车辆信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>车辆信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }">
            <el-descriptions-item label="车辆类型">{{
              DetailsData.vehicleType
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌型号">{{
              DetailsData.brandModel
            }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{
              DetailsData.specification
            }}</el-descriptions-item>
            <el-descriptions-item label="参数">
              <div style="display: flex; flex-direction: column">
                <div>
                  厢长：{{ DetailsData.carriageLength == null ? '--' : DetailsData.carriageLength + '米' }}，载方：{{
                    DetailsData.loadSide == null ? '--' : DetailsData.loadSide + '方'
                  }}，载重：{{ DetailsData.loadCapacity == null ? '--' : DetailsData.loadCapacity + '吨' }}，车高：{{
  DetailsData.vehicleHeight == null ? '--' : DetailsData.vehicleHeight + '米'
}}
                </div>
                <div>#4.2（包含）米长以上需提供道路运输许可证</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="图片资料">
              <div class="picBox">
                <div class="pic_item">
                  <el-image class="pic" :src="DetailsData.carFortyFive" :preview-src-list="[DetailsData.carFortyFive]">
                  </el-image>
                  <span>车辆照片</span>
                </div>
                <div class="pic_item">
                  <el-image class="pic" :src="DetailsData.drivingLicenseCar"
                    :preview-src-list="[DetailsData.drivingLicenseCar]">
                  </el-image>
                  <span>行驶证照片</span>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 关联信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>关联信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }">
            <el-descriptions-item label="绑定司机">{{
              DetailsData.driverName || '无'
            }}</el-descriptions-item>
            <el-descriptions-item label="加入车队">{{
              DetailsData.fleetName || '无'
            }}</el-descriptions-item>
          </el-descriptions>
          <!--认证信息  -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>认证信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }">
            <el-descriptions-item label="认证时间">{{
              AuditTime
            }}</el-descriptions-item>
            <el-descriptions-item label="认证人">{{
              authenticator
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";

import httpApi from "@/http";

export default {
  // props: {
  //   permissions: {
  //     typeof: Object,
  //     default: {},
  //   },
  // },

  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      createTime: [],//加入时间
      carNumber: "", //当前搜索的车牌号值
      TypeSelected: "", //当前选择 车型
      stateSelected: "",
      records: [], //列表数据
      data: {
        total: "",
        size: "",
        pages: "",
      },
      VisibleDetail: false, //详情弹窗是否显示
      vehicleTypeData: [], //车型 数组
      DetailsData: {}, //详情数据
      AuditTime: "", //认证时间
      authenticator: "", //认证人
      pageCurrent: 1, //当前页
      pageSize: "10", //每页10条
      permissions: {}
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    getSerialNumber() {
      // 前端解决序号
      this.records.forEach((item, i) => {
        let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1)
        item.SerialNumber = num;
      });
    },

    getList() {
      let params = {
        portAddress: "PLATFORM",
        auditStatus: "1",
        current: this.pageCurrent,
        size: this.pageSize,
      };
      // console.log(params);
      httpApi.vehicleApi.queryList(params).then((res) => {
        this.records = res.data.data.records;
        this.getSerialNumber();
        this.data = res.data.data;

        // this.records.forEach((item, i) => {
        //   this.records[i].vehicleHeight = item.vehicleHeight + "米";
        //   this.records[i].carriageLength = item.carriageLength + "米";
        //   this.records[i].loadSide = item.loadSide + "方";
        //   this.records[i].loadCapacity = item.loadCapacity + "吨";
        // });
      });
    },
    getvehicleType() {
      httpApi.vehicleApi.getAllVehicleType().then((res) => {
        // console.log("车型种类", res.data.data);
        this.vehicleTypeData = res.data.data;
      });
    },

    showDetailBox(vehicleId) {
      this.VisibleDetail = true;
      httpApi.vehicleApi
        .getWaitAuditDetails({ vehicleId: vehicleId })
        .then((res) => {
          this.DetailsData = res.data.data;
          // console.log('详情数据', this.DetailsData);
          this.AuditTime =
            this.DetailsData.auditVoList[0].auditVoList[0].auditTime;
          this.authenticator =
            this.DetailsData.auditVoList[0].auditVoList[0].auditUser;
        });
    },
    changeVehicleType(value) {
      this.TypeSelected = value;
    },
    searchList() {
		this.pageCurrent = 1;
      let params = {
        portAddress: "PLATFORM",
        auditStatus: "1",

        numberplate: this.carNumber,
        vehicleType: this.TypeSelected,
        current: this.pageCurrent,
        size: this.pageSize,
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
      };
      // console.log('参数', params);
      httpApi.vehicleApi.queryList(params).then((res) => {
        // console.log('查询结果', res);
        this.records = res.data.data.records;
        this.data = res.data.data;
        this.getSerialNumber()
      });
    },
    // 清空
    CleanUp() {
      this.carNumber = "";
      this.stateSelected = "";
      this.TypeSelected = "";
      this.createTime = []
      this.searchList();
    },
    changePages(val) {
      this.pageCurrent = val;
      // console.log(val);
      this.getList();
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
    
  },
  mounted() {
    this.getvehicleType();

    this.getList();
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table1.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.table1.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table1.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
};
</script>
  
<style lang="scss" scoped>
.control {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;


  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 267px);
  background-color: #fff;


  .list {
    height: calc(100% - 48px);
    padding: 0 30px;

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 362px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;
      margin: 0 auto;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .paginationBox {
    border-top: 1px solid #f0f0f0;
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;
    padding: 0 30px;

    .pagination {
      margin-left: auto;
    }
  }
}
</style>
  
  <!-- 详情弹窗 -->
<style lang="scss">
.zdy_dialog {
  height: 100vh;
  margin: 0 !important;
  float: right;

  .dialog_header {
    display: flex;

    .icon-dairenzhengcheliang {
      font-size: 43px;
      color: #1890ff;
      margin-right: 12px;
    }

    .infoBox {
      >.info {
        display: flex;
        align-items: center;
        margin-bottom: 7px;

        >.carNumber {
          font-size: 18px;
          color: #262626;
          font-weight: bold;
          margin-right: 8px;
        }

        >.tag {
          width: 46px;
          height: 18px;
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          text-align: center;
          line-height: 18px;
        }
      }

      >.text {
        color: #939393;
        font-size: 12px;
      }
    }
  }

  .dialog_body {
    >.title {
      height: 60px;
      display: flex;
      align-items: center;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >h3 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
      }

      .center_line {
        flex: 1;
        height: 1px;
        background-color: #f0f0f0;
        margin-left: 14px;
      }
    }

    .picBox {
      display: flex;

      .pic_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 32px;

        .pic {
          width: 109px;
          height: 71px;
        }

        >span {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
  